<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入歌手">
    <input type="text" placeholder="请输入歌曲名称">
    <button class="add">添加</button>

    <table border="1" align="center" cellpadding="10" cellspacing="0">
        <thead>
            <tr>
                <th>歌手</th>
                <th>歌曲</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>许嵩 </td>
                <td>素颜</td>
                <td>
                    <button>删除</button>
                </td>
            </tr> -->
        </tbody>

    </table>


    <script>
        let btn = document.querySelector(".add")
        let tbody = document.querySelector("tbody")
        let inp = document.querySelectorAll("input")

        
        let arr = [
        ];

        // 根据数组中的数据来去创建节点 如果需要删除 ，则应当删除数组中的值 然后再根据最新数据 重置节点
        btn.onclick = function () {
            let obj = {}; //新对象
            obj.name = inp[0].value;
            obj.music = inp[1].value;
            // 将用户输入的内容 存储到新创建的 对象上
            arr.push(obj);
            // 将新创建的对象添加到 数组当中
            createEle(arr) //调用方法 让他根据最新数据 重置 一遍节点
        }
        //传入数组创建 对应数量的 tr结构
        function createEle(arr) {
            let tbody = document.querySelector("tbody")
            let str = "";
            for (let i = 0; i < arr.length; i++) {
                str += ` <tr>
                <td>${arr[i].name} </td>
                <td>${arr[i].music}</td>
                <td>
                    <button onclick="deleteFun(${i})" data-index="">删除</button>
                </td>
            </tr>`
            }
            tbody.innerHTML = str; //将合并好的字符串赋值给 tbody 的innerHTML
        }
        function deleteFun(one) {
            console.log(one);
            // 删除数组上对应的数据 然后重新创建节点
            arr.splice(one,1);
            // 清空原有节点 然后根据最新数据 重新创建节点
            createEle(arr) // 传入数组创建 对应数量的 tr结构
        }




        // let a = 0;
        // btn.onclick = function () {
        //     console.log(tbody.innerHTML);
        //     tbody.innerHTML += ` <tr>
        //         <td>${inp[0].value} </td>
        //         <td>${inp[1].value}</td>
        //         <td>
        //             <button onclick="deleteFun(${a})" data-index="${a}">删除</button>
        //         </td>
        //     </tr>`
        //     a++;
        // }
        // 因为删除 导致 tr 数量发生改变 下标 也随着改变 但是我们记录 data-index 没变
        // function deleteFun(one) {
        //     console.log(one);
        //     let trs = document.querySelectorAll("tbody>tr");
        //     trs[one].remove();


        //     // remove()
        //     // removeChild()

        // }


        // btn.onclick = function (){
        //     let tr = document.createElement("tr")
        //     let td1 = document.createElement("td")
        //     let td2 = document.createElement("td")
        //     let td3 = document.createElement("td")
        //     let button = document.createElement("button")
        //     button.innerText = "删除"
        // button.onclick = function (){
        //     console.log(11111);
        // }
        //     td1.innerText = inp[0].value;
        //     td2.innerText = inp[1].value;
        //     td3.appendChild(button); //将button 添加到 第三个td；
        //     tr.appendChild(td1)
        //     tr.appendChild(td2)
        //     tr.appendChild(td3)
        //     tbody.appendChild(tr)
        //     inp[0].value = "" //清空里面的内容
        //     inp[1].value = ""
        // }


    </script>




</body>

</html>